<template>
    <!-- 使用v-bind指令绑定src属性，动态设置图片地址 -->
    <img :src="src" ref="img" alt="">
</template>
<script setup lang="ts">
// 引入vue中的ref、defineProps、useTemplateRef、onMounted函数
import { ref, defineProps, useTemplateRef, onMounted } from 'vue'
// 定义props属性，接收dataSrc参数
const props = defineProps(['dataSrc'])
// 使用useTemplateRef函数获取img元素的引用
const img = useTemplateRef('img')
// 定义src属性，初始值为一个图片地址
const src = ref('https://s1.zfrontier.com/static/wasd-editor/images/ajax-loader.gif')

function loadImage() {
    const newImage = new Image()
    newImage.src = props.dataSrc
    newImage.addEventListener('load', () => {
        img.value!.src = props.dataSrc
    })
    newImage.addEventListener('error', () => {
        img.value!.src = 'https://img2.baidu.com/it/u=880768612,3180740730&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500'
    })
}

// 在组件挂载后执行
onMounted(() => {
    // 如果img元素存在
    if (img.value) {
        // 创建一个IntersectionObserver对象，用于监听img元素是否进入视口
        const observer = new IntersectionObserver((entries) => {
            // 如果img元素没有进入视口，则返回
            if (entries[0].intersectionRatio <= 0) return

            loadImage()

            // 停止监听img元素
            observer.unobserve(img.value!)
        })
        // 开始监听img元素
        observer.observe(img.value)
    }
})
</script>